<template>
  <div class="inspe_page">
    <user-card></user-card>
    <div class="tab_box">
      <tab
        :line-width="3.5"
        custom-bar-width="30px"
        active-color="#131A2A"
        bar-active-color="#448EFF"
        default-color="#9CA6BA"
      >
        <tab-item :selected="tabItemShow == '0'" @on-item-click="tabItemClick"
          >检查</tab-item
        >
        <tab-item :selected="tabItemShow == '1'" @on-item-click="tabItemClick"
          >检验</tab-item
        >
      </tab>
    </div>

    <div class="inspe_box">
      <div class="cus_select" @click="dmsfun">
        <img
          src="@/assets/img/calendar@2x.png"
          alt=""
          style="width: 1.0625rem; height: 0.9375rem; margin-right: 0.3125rem"
        />
        <div>{{ value }}</div>
        <img
          src="@/assets/img/drop.png"
          alt=""
          style="width: 0.6875rem; height: 0.4375rem"
        />
      </div>
      <template v-if="noData">
        <div class="noresult">
          <img src="@/assets/img/img_no results@2x.png" alt=""/>
          <div>无数据</div>
        </div>
      </template>
      <template else>
      <div v-if="tabItemShow == 0">
        <div
          class="report_item"
          v-for="(item2, index2) in reportList"
          @click="goInspectionreport(item2)"
          v-if="item2.reportType == '2'"
        >
          <img src="@/assets/img/right.png" alt="" class="bill_box_img">
          <div class="report_item_1">
            <div>{{ item2.itemName }}</div>
          </div>
          <div class="report_item_2">
            <div>{{ item2.deptName }}</div>
            <div>{{ item2.reportTime }}</div>
          </div>
        </div>
      </div>
      <div v-if="tabItemShow == 1">
        <div
          class="report_item"
          v-for="(item1, index1) in reportList"
          @click="goSurveyreport(item1)"
          v-if="(item1.reportType == '0') | (item1.reportType == '1')"
        ><img src="@/assets/img/right.png" alt="" class="bill_box_img">
          <div class="report_item_1">
            <div>{{ item1.itemName }}</div>
          </div>
          <div class="report_item_2">
            <div>{{ item1.deptName }}</div>
            <div>{{ item1.reportTime }}</div>
          </div>
        </div>
      </div>
      </template>
    </div>
    <div class="date_mask" v-if="dateMaskShow">
      <div class="date_mask_ul">
        <div
          class="date_mask_li"
          v-for="(date, index) in datelist"
          @click="dateClick($event, date)"
          :style="{ color: date.selected == true ? '#448EFF' : '#3F4551' }"
          :data-idx="index"
        >
          {{ date.name }}
        </div>
        <div class="date_mask_li" @click="dmsfun">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCheckOutReportList } from "@/api/api";
import userCard from "@/components/userCard.vue";
import { Tab, TabItem } from "vux";

export default {
  components: {
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      noData: true,
      patientIdcardNo: "",
      tabItemShow: "0",
      dateMaskShow: false,
      value: "一个月",
      y: "",
      m: "",
      d: "",
      userInfo: {},
      datelist: [
        { value: 0, name: "一周内", selected: false },
        { value: 0, name: "一月内", selected: false },
        { value: 0, name: "三月内", selected: false },
        { value: 0, name: "一年内", selected: false },
        { value: 0, name: "更早", selected: false },
      ],
      EndDate: "",
      BeginDate: "",
      inspectReport: [],
      reportList: [],
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    if (window.localStorage.getItem("inpTabItem")) {
      this.tabItemShow = window.localStorage.getItem("inpTabItem");
    }
    this.getToday();
    if (window.localStorage.getItem("inpIdx")) {
      var idx = JSON.parse(window.localStorage.getItem("inpIdx"));
      this.datelist[idx].selected = true;
      this.changeDay(this.datelist[idx].name);
      this.value = this.datelist[idx].name;
    } else {
      this.getCheckOutReportList();
    }
    console.log(this.userInfo);
  },
  methods: {
    // 获取检查检验列表
    getCheckOutReportList() {
      var data = {
        beginDate: this.EndDate,
        endDate: this.BeginDate,
        // beginDate: "2018-01-01",
        // endDate: "2020-12-31",
        hosId: "",
        patientName: this.userInfo.name,
        patientIdcardNo: this.userInfo.idNo,
      };
      getCheckOutReportList(data).then((res) => {
        if (res.code == 200) {
          var nodata = {
            reportList: [],
          };
          this.reportList =
            res.data == null ? nodata : res.data.reportList.reportInfo;
          this.patientIdcardNo =
            res.data == null ? "" : res.data.patientIdcardNo;

          if (this.reportList.length >0 ) {
            this.noData = false;
          }
        }
      });
    },
    // 跳转检查报告
    goInspectionreport(item) {
      item.patientIdcardNo = this.patientIdcardNo;
      window.localStorage.setItem("inpTabItem", this.tabItemShow);

      this.$router.push({ path: "/inspection_report", query: item });
    },
    // 跳转检验报告
    goSurveyreport(item) {
      item.patientIdcardNo = this.patientIdcardNo;
      window.localStorage.setItem("inpTabItem", this.tabItemShow);
      this.$router.push({ path: "/survey_report", query: item });
    },
    getAge(strBirthday) {
      var returnAge;

      var strBirthdayArr = strBirthday.split("-");

      var birthYear = strBirthdayArr[0];

      var birthMonth = strBirthdayArr[1];

      var birthDay = strBirthdayArr[2];

      var d = new Date();

      var nowYear = d.getFullYear();

      var nowMonth = d.getMonth() + 1;

      var nowDay = d.getDate();

      if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0岁
      } else {
        var ageDiff = nowYear - birthYear; //年之差

        if (ageDiff > 0) {
          if (nowMonth == birthMonth) {
            var dayDiff = nowDay - birthDay; //日之差

            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            var monthDiff = nowMonth - birthMonth; //月之差

            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
        }
      }

      return returnAge; //返回周岁年龄
    },
    tabItemClick(e) {
      this.tabItemShow = e;
      window.localStorage.setItem("inpTabItem", e);
      //   if (e == 0) {
      //     this.getInspectReport();
      //   }
      //   if (e == 1) {
      //     this.getReportList();
      //   }
    },
    dmsfun() {
      this.dateMaskShow = !this.dateMaskShow;
    },
    dateClick(e, date) {
      console.log(e.currentTarget.dataset.idx);
      var idx = e.currentTarget.dataset.idx;
      this.dmsfun();
      this.value = date.name;
      this.datelist.forEach((element) => {
        element.selected = false;
      });
      this.datelist[idx].selected = true;
      this.changeDay(date.name);
      window.localStorage.setItem("inpIdx", idx);
    },
    getToday() {
      var today = new Date();
      var yy = today.getFullYear();
      var mm = today.getMonth() + 1;
      var dd = today.getDate();
      this.BeginDate =
        yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + (dd < 10 ? "0" + dd : dd);
      //
      var nowdate = new Date();
      nowdate.setMonth(nowdate.getMonth() - 1);
      this.y = nowdate.getFullYear();
      this.m = nowdate.getMonth() + 1;
      this.d = nowdate.getDate();
      this.EndDate =
        this.y +
        "-" +
        (this.m < 10 ? "0" + this.m : this.m) +
        "-" +
        (this.d < 10 ? "0" + this.d : this.d);
    },
    changeDay(name) {
      console.log(name);
      var nowdate = new Date();
      if (name == "一周内") {
        var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
        this.y = oneweekdate.getFullYear();
        this.m = oneweekdate.getMonth() + 1;
        this.d = oneweekdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一月内") {
        nowdate.setMonth(nowdate.getMonth() - 1);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "三月内") {
        nowdate.setMonth(nowdate.getMonth() - 3);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一年内") {
        nowdate.setMonth(nowdate.getMonth() - 12);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "更早") {
        this.EndDate = "2000-01-01";
      }
      this.getCheckOutReportList();
    },
  },
};
</script>
<style scoped>
.inspe_page {
  height: 100vh;
  overflow: hidden;
}
.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.cus_select {
  padding: 0px 1rem;
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.cus_select img {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.cus_select div {
  width: calc(100% - 2.75rem);
  background-color: #f7fafd;
}

.date_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.date_mask_ul {
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* height: 18.75rem; */
  width: 100%;
  background-color: #ffffff;
}

.date_mask_li {
  width: 100%;
  height: 3.125rem;
  border-bottom: 0.0625rem solid #eee;
  line-height: 50px;
  text-align: center;
  font-size: 0.9375rem;
  color: #3f4551;
}

.date_mask_li:last-of-type {
  background-color: #f1f5f9;
}
.inspe_box {
  height: calc(100vh - 125px);
  overflow-y: auto;
}
.report_item {
  padding: 0.9375rem 0 0.625rem 0;
  margin: 0px 1rem;
  width: calc(100% - 2rem);
  border-bottom: 0.0625rem solid #e7ecf5;
  position: relative;
}
.report_item:last-child {
  border: none;
}

.report_item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report_item_1 > div:nth-of-type(1) {
  width: calc(100% - 3.125rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
}

.report_item_1 > div:nth-of-type(2) {
  width: 3.125rem;
  text-align: right;
  font-size: 0.875rem;
  color: #f72d23;
}

.report_item_2 {
  font-size: 0.875rem;
  color: #a4adbe;
  margin-top: 0.6875rem;
}

.report_item_2 > div:nth-of-type(2) {
  font-size: 0.75rem;
}
.noborder {
  border: none;
}

.bill_box_img {
  width: 0.5rem;
  height: 0.8125rem;
  position: absolute;
  top: calc((100% - 0.8125rem) / 2);
  right: 1rem;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
